// 1、导入 React 第三方包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 引入css（webpack）
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));

// JSX中使用样式
// <h1 style="color: red; background-color: pink; width: 300px;">Hello React</h1>

const h1 = (
  <h1 style={{ color: 'red', backgroundColor: 'pink', width: 300 }}>
    Hello React
  </h1>
);

const h2 = <h2 className="p-title2">Hello React2</h2>;

// 动态设置样式，动态类名
// 1 数据
const isShow = false;
// 2 ui
const h3 = <h3 className={isShow ? 'p-title1' : 'p-title2'}>Hello React2</h3>;

root.render(h3);
